<template>
  <div class="home">
    <header class="navbar">
      <div class="container">
        <div class="nav-content">
          <div class="logo">
            <span class="logo-text">微众通</span>
          </div>
          <nav class="nav-menu">
            <a href="#home" class="nav-link">首页</a>
            <a href="#products" class="nav-link">产品中心</a>
            <a href="#solutions" class="nav-link">解决方案</a>
            <a href="#about" class="nav-link">关于我们</a>
            <a href="#contact" class="nav-link">联系我们</a>
          </nav>
        </div>
      </div>
    </header>

    <section class="hero" id="home">
      <div class="hero-content">
        <div class="container">
          <h1 class="hero-title">智慧连接未来</h1>
          <p class="hero-subtitle">微众通致力于为企业提供创新的数字化解决方案</p>
          <div class="hero-buttons">
            <a href="#products" class="btn btn-primary">了解产品</a>
            <a href="#contact" class="btn btn-outline">联系我们</a>
          </div>
        </div>
      </div>
      <div class="scroll-indicator" @click="scrollToProducts">
        <div class="scroll-arrow">↓</div>
      </div>
    </section>

    <section class="products-section" id="products">
      <div class="container">
        <h2 class="section-title">核心产品</h2>
        <p class="section-subtitle">为不同行业提供专业的数字化解决方案</p>
        <div class="products-grid">
          <div class="product-card">
            <div class="product-icon">📊</div>
            <h3 class="product-title">智能管理系统</h3>
            <p class="product-desc">为企业提供全面的管理解决方案</p>
            <a href="#" class="product-link">了解更多 →</a>
          </div>
          <div class="product-card">
            <div class="product-icon">📈</div>
            <h3 class="product-title">数据分析平台</h3>
            <p class="product-desc">深度挖掘数据价值，助力决策优化</p>
            <a href="#" class="product-link">了解更多 →</a>
          </div>
          <div class="product-card">
            <div class="product-icon">📱</div>
            <h3 class="product-title">移动办公应用</h3>
            <p class="product-desc">随时随地高效办公，提升工作效率</p>
            <a href="#" class="product-link">了解更多 →</a>
          </div>
        </div>
      </div>
    </section>

    <section class="solutions-section" id="solutions">
      <div class="container">
        <h2 class="section-title">解决方案</h2>
        <p class="section-subtitle">针对不同行业的专业解决方案</p>
        <div class="solutions-grid">
          <div class="solution-item">
            <h3>企业管理解决方案</h3>
            <p>为企业提供全面的数字化管理解决方案，包括人事管理、财务管理、项目管理等。</p>
          </div>
          <div class="solution-item">
            <h3>电商解决方案</h3>
            <p>助力企业构建完整的电商生态系统，包括商品管理、订单处理、支付集成等。</p>
          </div>
          <div class="solution-item">
            <h3>智能制造解决方案</h3>
            <p>通过数字化技术提升制造效率，包括生产监控、质量管理、设备维护等。</p>
          </div>
        </div>
      </div>
    </section>

    <section class="about-section" id="about">
      <div class="container">
        <h2 class="section-title">关于微众通</h2>
        <p class="section-subtitle">专注于为企业提供数字化转型解决方案</p>
        <div class="about-content">
          <div class="about-text">
            <p>微众通是一家专业的数字化解决方案提供商，致力于帮助企业实现数字化转型。我们拥有专业的技术团队和丰富的行业经验，为客户提供定制化的解决方案。</p>
            <div class="stats">
              <div class="stat-item">
                <h3>500+</h3>
                <p>服务客户</p>
              </div>
              <div class="stat-item">
                <h3>50+</h3>
                <p>专业团队</p>
              </div>
              <div class="stat-item">
                <h3>5年</h3>
                <p>行业经验</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="contact-section" id="contact">
      <div class="container">
        <h2 class="section-title">联系我们</h2>
        <p class="section-subtitle">欢迎与我们取得联系，了解更多信息</p>
        <div class="contact-content">
          <div class="contact-info">
            <div class="contact-item">
              <span class="contact-icon">📞</span>
              <div>
                <h4>电话</h4>
                <p>400-123-4567</p>
              </div>
            </div>
            <div class="contact-item">
              <span class="contact-icon">✉️</span>
              <div>
                <h4>邮箱</h4>
                <p>info@weizhongtong.com</p>
              </div>
            </div>
            <div class="contact-item">
              <span class="contact-icon">📍</span>
              <div>
                <h4>地址</h4>
                <p>深圳市南山区科技园</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    scrollToProducts() {
      document.getElementById('products').scrollIntoView({ behavior: 'smooth' })
    }
  }
}
</script>

<style scoped lang="scss">
// 重置样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 通用容器
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

// 导航栏
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba($white, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;

  .nav-content {
    @include flex-between;
    height: $nav-height;
  }

  .logo-text {
    font-size: 24px;
    font-weight: 700;
    @include text-gradient($primary-color, $secondary-color);
  }

  .nav-menu {
    display: flex;
    gap: 2rem;
  }

  .nav-link {
    text-decoration: none;
    color: $text-dark;
    font-weight: 500;
    transition: color 0.3s ease;

    &:hover {
      color: $primary-color;
    }
  }
}

// 英雄区域
.hero {
  height: 100vh;
  background: linear-gradient(135deg, rgba($primary-color, 0.9) 0%, rgba($secondary-color, 0.9) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: $white;
  text-align: center;

  &-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease;
  }

  &-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease 0.3s both;
  }

  &-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    animation: fadeInUp 1s ease 0.6s both;
  }
}

.btn {
  @include button-base;

  &-primary {
    background: $white;
    color: $primary-color;
    @include button-hover-effect;
  }

  &-outline {
    background: transparent;
    color: $white;
    border: 2px solid $white;

    &:hover {
      background: $white;
      color: $primary-color;
    }
  }
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  animation: bounce 2s infinite;

  .scroll-arrow {
    font-size: 2rem;
    color: $white;
  }
}

// 通用样式
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
  color: #1a1a1a;
}

.section-subtitle {
  font-size: 1.1rem;
  text-align: center;
  color: $text-light;
  margin-bottom: 3rem;
}

// 产品部分
.products-section {
  padding: 5rem 0;
  background: $gray-bg;

  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }

  .product-card {
    @include card;
    padding: 2rem;
    text-align: center;

    .product-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    .product-title {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      color: $text-dark;
    }

    .product-desc {
      color: $text-light;
      margin-bottom: 1.5rem;
    }

    .product-link {
      color: $primary-color;
      text-decoration: none;
      font-weight: 500;
    }
  }
}

// 解决方案部分
.solutions-section {
  padding: 5rem 0;

  .solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }

  .solution-item {
    padding: 2rem;
    background: $gray-bg;
    border-radius: 12px;

    h3 {
      color: $text-dark;
      margin-bottom: 1rem;
    }

    p {
      color: $text-light;
    }
  }
}

// 关于我们部分
.about-section {
  padding: 5rem 0;
  background: $gray-bg;

  .about-content {
    text-align: center;
  }

  .about-text p {
    font-size: 1.1rem;
    color: $text-light;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
  }

  .stat-item {
    text-align: center;

    h3 {
      font-size: 2.5rem;
      color: $primary-color;
      margin-bottom: 0.5rem;
    }
  }
}

// 联系我们部分
.contact-section {
  padding: 5rem 0;

  .contact-content {
    display: flex;
    justify-content: center;
  }

  .contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 600px;
  }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;

    .contact-icon {
      font-size: 2rem;
    }

    h4 {
      margin-bottom: 0.5rem;
      color: $text-dark;
    }

    p {
      color: $text-light;
    }
  }
}

// 动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

// 响应式设计
@include mobile {
  .hero {
    &-title {
      font-size: 2.5rem;
    }
    
    &-buttons {
      flex-direction: column;
      align-items: center;
    }
  }
  
  .navbar .nav-menu {
    display: none;
  }
  
  .products-section .products-grid,
  .solutions-section .solutions-grid {
    grid-template-columns: 1fr;
  }
  
  .about-section .stats {
    flex-direction: column;
    gap: 1rem;
  }
  
  .contact-section .contact-info {
    grid-template-columns: 1fr;
  }
}
</style> 